<template>
    <div
        id="container"
        :style="
            theme === 'dark'
                ? { background: '#333', color: '#fff' }
                : { background: '#fff', color: '#333' }
        "
        ref="box"
    >
        <div class="header">
            <h2 ref="h">农业数据实时监控系统</h2>
            <button @click="changeTheme">主题切换</button>
        </div>
        <div class="main">
            <div class="left">
                <div class="left-top">
                    <left-top :theme="theme"></left-top>
                </div>
                <div class="left-bottom">
                    <left-bottom :theme="theme"></left-bottom>
                </div>
            </div>
            <div class="center">
                <div class="center-top">
                    <center-top :theme="theme"></center-top>
                </div>
                <div class="center-bottom">
                    <center-bottom :theme="theme"></center-bottom>
                </div>
            </div>
            <div class="right">
                <div class="right-top">
                    <right-top :theme="theme"></right-top>
                </div>
                <div class="right-bottom">
                    <right-bottom :theme="theme"></right-bottom>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LeftTop from '../../components/LeftTop';
import LeftBottom from '../../components/LeftBottom';
import CenterTop from '../../components/CenterTop';
import CenterBottom from '../../components/CenterBottom';
import RightTop from '../../components/RightTop';
import RightBottom from '../../components/RightBottom';
import { mapActions, mapGetters } from 'vuex'
export default {
    components: {
        LeftTop,
        LeftBottom,
        CenterTop,
        CenterBottom,
        RightTop,
        RightBottom,
    },
    data() {
        return {
        };
    },
    computed: {

        ...mapGetters({
            theme: 'theme',
        }),
    },
    mounted() {
        this.$refs.h.style.fontSize = (this.$refs.box.offsetWidth / 100 * 2) + 'px'
        window.addEventListener('resize', () => {
            this.$refs.h.style.fontSize = (this.$refs.box.offsetWidth / 100 * 2) + 'px'
        })
    },

    methods: {
        ...mapActions({
            themeAction: 'themeAction',
        }),
        changeTheme() {
            if (this.theme === 'dark') {
                this.themeAction('light')
            } else {
                this.themeAction('dark')
            }
        }
    },
};
</script>

<style scoped>
.header {
    position: relative;
    width: 100%;
    line-height: 85px;
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;
    background: url(../../assets/top02.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 10px;
}
.header h2 {
    margin: 0;
    padding: 0;
}
.header button {
    position: absolute;
    right: 30px;
    top: 60px;
    padding: 5px 10px;
}
.main {
    height: calc(100vh - 85px);
    display: flex;
}
.left,
.right {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.left-top,
.left-bottom,
.right-top,
.right-bottom {
    flex: 1;
}
.center {
    flex: 2;
    display: flex;
    flex-direction: column;
}
.center-top {
    flex: 3;
}
.center-bottom {
    flex: 8;
}
</style>
